import React, { Component } from 'react'
import BetterScroll from 'better-scroll'

export default class App extends Component {
  state = {
    list: [],
  }
  render() {
    return (
      <div>
        <button
          type='button'
          onClick={() => this.getData()}
        >
          获取数据
        </button>
        <div
          className='wrapper'
          style={{ height: '300px', background: 'yellow', overflow: 'hidden' }}
        >
          <ul className='content'>
            {this.state.list.map((item) => {
              return <li key={item}>{item}</li>
            })}
          </ul>
        </div>
      </div>
    )
  }

  getData = () => {
    let list = []
    for (let i = 0; i < 50; i++) {
      list.push(i)
    }
    this.setState(
      {
        list,
      },
      () => {
        new BetterScroll('.wrapper')
      }
    )
    // // 滚动不生效
    // new BetterScroll('.wrapper')

    // 不生效
    // setTimeout(() => {
    //   this.setState(
    //     {
    //       list,
    //     },
    //     () => {
    //       new BetterScroll('.wrapper')
    //     }
    //   )
    //   // 滚动不生效
    //   // new BetterScroll('.wrapper')
    // }, 0)
  }
}
